<template>
  <div id="stu_examDialog">
    <el-dialog
      v-model="isShowExamChat"
      :close-on-click-modal="false"
      width="55%"
      center
      :show-close="false"
      class="pre-chat-dialog"
      top="150px"
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-title">{{ examName }}</div>
          <div class="header-right">
            <div class="close-icon" @click="closeFn()">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
      </template>

      <div class="dialog-chat-body">
        <commonChat_stuAiExam_socket :agentId="agentId" :classId="classId" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonChat_stuAiExam_socket from "./commonChat_stuAiExam_socket.vue";

export default {
  components: {
    commonChat_stuAiExam_socket,
  },
  props: {
    examName: {
      type: String,
      default: "",
    },
    agentId: {
      type: Number,
      default: null,
    },
    classId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      isShowExamChat: false,
    };
  },
  methods: {
    openFn() {
      this.isShowExamChat = true;
    },
    closeFn() {
      this.$emit("closeFn");
    },
    closeDialog() {
      this.isShowExamChat = false;
    },
  },
};
</script>

<style lang="scss" scoped>
#stu_examDialog {
  width: 100%;
  height: 100%;
  .pre-chat-dialog {
    position: relative;
    background: linear-gradient(90deg, #cde9fd, #f0f2f8, #d1e1f8);
    .el-dialog {
      border-radius: 16px;
      overflow: hidden;
    }

    .el-dialog__header {
      padding: 0;
      margin: 0;
    }

    .el-dialog__body {
      padding: 0;
      overflow: hidden;
    }
  }

  .dialog-header {
    position: absolute;
    width: 100%;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
    }
    .header-right {
      display: flex;
      align-items: center;
      .close-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: #adadad;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 15px;
      }
    }
  }

  .dialog-chat-body {
    height: 100%;
    background-color: #f3f5fa;
    overflow: hidden;
  }
}
</style>